@page
@model Unified.payment.code.Pages.UnifiedPaymentModel
@{
    ViewData["Title"] = "统一支付收款码生成";
}

<div class="container">
    <div class="row">
        <div class="col-12 text-center mb-5">
            <h1 class="display-4">统一支付收款码生成器</h1>
            <p class="lead">输入您的微信和支付宝收款链接，或上传收款二维码图片，生成统一收款二维码</p>
        </div>
    </div>
    
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">收款链接设置</h5>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        <div class="mb-4">
                            <label for="WechatPayUrl" class="form-label">
                                <i class="fab fa-weixin text-success me-2"></i>微信支付链接
                            </label>
                            <input type="text" class="form-control form-control-lg" id="WechatPayUrl" name="WechatPayUrl" placeholder="请输入微信支付链接" value="@Model.WechatPayUrl">
                            <div class="form-text">示例：wxp://f2f0... 或上传微信收款码图片</div>
                            
                            <!-- 微信二维码上传 -->
                            <div class="mt-2">
                                <label for="WechatQrCodeFile" class="form-label">或上传微信收款码图片</label>
                                <input class="form-control" type="file" id="WechatQrCodeFile" name="wechatQrCodeFile" accept="image/*">
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="AlipayUrl" class="form-label">
                                <i class="fab fa-alipay text-primary me-2"></i>支付宝支付链接
                            </label>
                            <input type="text" class="form-control form-control-lg" id="AlipayUrl" name="AlipayUrl" placeholder="请输入支付宝支付链接" value="@Model.AlipayUrl">
                            <div class="form-text">示例：https://qr.alipay.com/... 或上传支付宝收款码图片</div>
                            
                            <!-- 支付宝二维码上传 -->
                            <div class="mt-2">
                                <label for="AlipayQrCodeFile" class="form-label">或上传支付宝收款码图片</label>
                                <input class="form-control" type="file" id="AlipayQrCodeFile" name="alipayQrCodeFile" accept="image/*">
                            </div>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-qrcode me-2"></i>生成统一收款码
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    @if (!string.IsNullOrEmpty(Model.UnifiedQrCode))
    {
        <div class="row justify-content-center mt-5">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header text-center">
                        <h5 class="mb-0">统一收款码</h5>
                    </div>
                    <div class="card-body text-center">
                        <p class="card-text">请用微信扫下面的二维码进行支付</p>
                        <div class="qr-code-container">
                            <img src="data:image/png;base64,@Model.UnifiedQrCode" alt="Unified Payment QR Code" class="img-fluid" />
                        </div>
                        <p class="mt-3">
                            <i class="fas fa-info-circle me-2"></i>此二维码同时支持微信和支付宝支付
                        </p>
                        <div class="mt-3">
                            <button class="btn btn-outline-primary" onclick="downloadQRCode()">
                                <i class="fas fa-download me-2"></i>下载二维码
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <script>
            function downloadQRCode() {
                const img = document.querySelector('.qr-code-container img');
                const link = document.createElement('a');
                link.href = img.src;
                link.download = 'unified-payment-qrcode.png';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        </script>
    }
    
    @if (!string.IsNullOrEmpty(Model.ErrorMessage))
    {
        <div class="row justify-content-center mt-4">
            <div class="col-lg-8">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-triangle me-2"></i>@Model.ErrorMessage
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
    }
</div>

<!-- 添加Font Awesome图标库 -->
@section Scripts {
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <script>
        // 页面加载完成后自动聚焦到第一个输入框
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('WechatPayUrl').focus();
        });
    </script>
}